<template>
    <div class="fuse">
      <div class="content1">
    <div class="content_east">
      <div class="substance">
        <div class="maintitle">
          <h1 class="txt">降水量实时监测</h1>
          <i class="el-icon-more detail" @click="jsllist"></i>
        </div>
        <div class="mainbody" id="precipitation"></div>
        <h1 class="none" v-show="precipitationShow">暂无数据</h1>
      </div>
      <div class="substance">
        <div class="maintitle">
          <h1 class="txt">涌水量实时监测</h1>
          <i class="el-icon-more detail" @click="ysllist"></i>
        </div>
        <div class="mainbody" id="WaterInflow"></div>
        <h1 class="none" v-show="WaterInflowShow">暂无数据</h1>
      </div>
      <div class="substance">
        <div class="maintitle">
          <h1 class="txt">排水量实时监测</h1>
          <i class="el-icon-more detail" @click="psllist"></i>
        </div>
        <div class="mainbody" style="display:flex">
          <div id="drainage" style="flex:1;height:88%;position: relative;">
            <h1 class="none" v-show="drainageShow">暂无数据</h1>
          </div>
          <div
            class="drainagenum"
            style="width:200px;height:88%;position: relative;"
          >
            <div class="accumulate">
              <p class="accumulatenum">{{ accumulatenum }}m³</p>
            </div>
            <p class="accumulatetxt">日累计排水量</p>
          </div>
        </div>
      </div>
    </div>
    <div class="content_middle">
      <div class="abnormal">
        <h1 class="abnormalnum">当日异常次数</h1>
        <p class="tote" @click="unusual">
          <span v-for="(item, index) in this.list.split('')" :key="index">{{
            item
          }}</span>
        </p>
      </div>
      <div class="hydrology tables">
        <h1 class="hydrologytxt">长观孔水文实时监测</h1>
        <el-table :data="holeRealDataList" :row-class-name="tableRowClassNameT">
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="测点编码"
            align="center"
            prop="cdCode"
            width="180"
            show-overflow-tooltip
          />
          <el-table-column
            label="测点状态"
            align="center"
            prop="cdStatus"
            :formatter="cdStatusFormatter"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <i
                :class="scope.row.cdStatus | caseStatusColorFilter"
                class="el-icon-star-on"
              ></i
              ><span :class="scope.row.cdStatus | caseStatusColorFilter">{{
                cdStatusFormatter(scope.row.cdStatus)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="水位测点值"
            align="center"
            prop="waterLevelValue"
            show-overflow-tooltip
          />
          <el-table-column
            label="水温测点值"
            align="center"
            prop="waterTemperatureValue"
            show-overflow-tooltip
          />
          <el-table-column
            label="数据时间"
            align="center"
            prop="dataTime"
            width="180"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.dataTime, "{y}-{m}-{d} {h}:{i}:{s}")
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="surface tables">
        <h1 class="hydrologytxt">地表岩移实时监测</h1>
        <el-table :data="sinkRealDataList" :row-class-name="tableRowClassNameT">
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="测点编码"
            align="center"
            prop="cdCode"
            show-overflow-tooltip
          />
          <el-table-column
            label="区域名称"
            align="center"
            prop="areaName"
            show-overflow-tooltip
          />
          <el-table-column
            label="桩点编号"
            align="center"
            prop="zdNumber"
            show-overflow-tooltip
          />
          <el-table-column
            label="测点状态"
            align="center"
            prop="cdStatus"
            :formatter="cdStatusFormatter"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <i
                :class="scope.row.cdStatus | caseStatusColorFilter"
                class="el-icon-star-on"
              ></i
              ><span :class="scope.row.cdStatus | caseStatusColorFilter">{{
                cdStatusFormatter(scope.row.cdStatus)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="桩点坐标X"
            align="center"
            prop="zdX"
            show-overflow-tooltip
          />
          <el-table-column
            label="桩点坐标Y"
            align="center"
            prop="zdY"
            show-overflow-tooltip
          />
          <el-table-column
            label="桩点坐标Z"
            align="center"
            prop="zdZ"
            show-overflow-tooltip
          />
          <el-table-column
            label="数据时间"
            align="center"
            prop="dataTime"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.dataTime, "{y}-{m}-{d} {h}:{i}:{s}")
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="content_west">
      <div class="substance">
        <div class="maintitle">
          <h1 class="txt">疏(放)水工程实时监测</h1>
          <!-- <i class="el-icon-more detail"></i> -->
        </div>
        <div class="mainbody drainage" style="padding-top:1%">
          <el-table
            :data="drainageData"
            height="95%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              label="测点编码"
              align="center"
              prop="cdCode"
              show-overflow-tooltip
            />
            <el-table-column
              label="疏(放)水位置"
              align="center"
              prop="sfsAddress"
              show-overflow-tooltip
            />
            <el-table-column
              label="水量(m³/h)"
              align="center"
              prop="sfsValue"
              show-overflow-tooltip
            />
            <el-table-column
              label="数据时间"
              align="center"
              prop="dataTime"
              width="160"
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.dataTime, "{y}-{m}-{d} {h}:{i}:{s}")
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="substance">
        <div class="maintitle">
          <h1 class="txt">地表水实时监测</h1>
          <i class="el-icon-more detail" @click="dbslist"></i>
        </div>
        <div class="mainbody" id="surfaceWater"></div>
        <h1 class="none" v-show="surfaceWaterShow">暂无数据</h1>
      </div>
      <div class="substance">
        <div class="maintitle">
          <h1 class="txt">微震事件实时监测</h1>
          <i class="el-icon-more detail" @click="wzlist"></i>
        </div>
        <div class="mainbody" style="position: relative;">
          <div class="chart" ref="chart"></div>
          <div class="bg"></div>
        </div>
      </div>
    </div>
    <el-dialog
      title="降水量实时监测"
      :visible.sync="precipitationVisible"
      center
      top="-1.9vh"
      v-if="precipitationVisible"
    >
      <div slot="title" class="header-title">
        <div><span></span><i>降水量实时监测</i><span></span></div>
      </div>
      <jsllist :parenttime="parenttime"></jsllist>
    </el-dialog>
    <el-dialog
      title="涌水量实时监测"
      :visible.sync="WaterInflowVisible"
      center
      top="-1.9vh"
      v-if="WaterInflowVisible"
    >
      <div slot="title" class="header-title">
        <div><span></span><i>涌水量实时监测</i><span></span></div>
      </div>
      <ysllist :parenttime="parenttime"></ysllist>
    </el-dialog>
    <el-dialog
      title="排水量实时监测"
      :visible.sync="drainageVisible"
      center
      top="-1.9vh"
      v-if="drainageVisible"
    >
      <div slot="title" class="header-title">
        <div><span></span><i>排水量实时监测</i><span></span></div>
      </div>
      <psllist :parenttime="parenttime"></psllist>
    </el-dialog>
    <el-dialog
      title="地表水实时监测"
      :visible.sync="surfaceWaterVisible"
      center
      top="-1.9vh"
      v-if="surfaceWaterVisible"
    >
      <div slot="title" class="header-title">
        <div><span></span><i>地表水实时监测</i><span></span></div>
      </div>
      <dbslist :parenttime="parenttime"></dbslist>
    </el-dialog>
    <el-dialog
      title="微震事件实时监测"
      :visible.sync="microseismVisible"
      center
      top="-1.9vh"
      v-if="microseismVisible"
    >
      <div slot="title" class="header-title">
        <div><span></span><i>微震事件实时监测</i><span></span></div>
      </div>
      <wzlist :parenttime="parenttime"></wzlist>
    </el-dialog>
    <el-dialog
      title="当日异常次数"
      :visible.sync="unusualShow"
      center
      top="-1.9vh"
      v-if="unusualShow"
    >
      <div slot="title" class="header-title">
        <div><span></span><i>当日异常次数</i><span></span></div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="排水测点异常" name="first">
          <psdlist :parenttime="parenttime"></psdlist>
        </el-tab-pane>
        <el-tab-pane label="长观孔异常" name="second">
          <cgklist :parenttime="parenttime"></cgklist>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
    </div>

</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import { listPumpRealData } from "@/api/realData/pumpRealData";
import { listHoleRealData } from "@/api/realData/holeRealData";
import { listSinkRealData } from "@/api/realData/sinkRealData";
import jsllist from "./jsllist.vue";
import ysllist from "./ysllist.vue";
import psllist from "./psllist.vue";
import dbslist from "./dbslist.vue";
import wzlist from "./wzlist.vue";
import cgklist from "./cgklist.vue";
import psdlist from "./psdlist.vue";
import { getPie3D, getParametricEquation } from "../../../utils/chart.js"; 
const color = [
  "#3cd6b7",
  "#fe9326",
  "#124fb7",
  "#383893",
  "#03bae2",
  "#eebd04",
  "#d8dfe2"
];
export default {
  components: {
    jsllist,
    ysllist,
    psllist,
    dbslist,
    wzlist,
    psdlist,
    cgklist
  },
  data() {
    return {
      intervalId: null,
      parenttime: "0",
      activeName: "first",
      //降水量
      precipitationShow: false,
      //涌水量
      WaterInflowShow: false,
      //排水量
      drainageShow: false,
      accumulatenum: "0",
      //地表水
      surfaceWaterShow: false,
      //疏放水
      drainageData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      //异常次数
      list: "0000",
      //异常
      unusualShow: false,
      //长观孔
      holeRealDataList: [],
      //地表岩移
      sinkRealDataList: [],
      precipitationVisible: false,
      WaterInflowVisible: false,
      drainageVisible: false,
      surfaceWaterVisible: false,
      microseismVisible: false,
      optionData: [],
      statusChart: null,
      option: {}
    };
  },
  methods: {
    // 定时刷新数据函数
    dataRefreh() {
      if (this.intervalId != null) {
        return;
      }
      this.intervalId = setInterval(() => {
        this.getprecipitation();
        this.getWaterInflow();
        this.getdrainage();
        this.getsurfaceWater();
        this.getdrainageData();
        this.getholeRealDataList();
        this.getsinkRealDataList();
        this.getpoliceList();
        this.quakeData();
        var that = this;
        setTimeout(function() {
          that.setLabel();
          that.initChart();
        }, 1000);
      }, 1000 * 60 * 2);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
    //降水量
    getprecipitation() {
      this.$http.get("visualization/home/rainData").then(res => {
        if (res.code == 200) {
          if (res.data.length != 0) {
            this.precipitationShow = false;
            var xdata = res.data.map(item => item.value);
            const maxNum = Math.max(...xdata.map(item => +item));
            var maxlist = [];
            for (var i = 0; i < xdata.length; i++) {
              maxlist.push(maxNum);
            }
            var mychartair = echarts.init(
              document.getElementById("precipitation")
            );
            var option = {
              tooltip: {
                trigger: "axis",
                formatter: "时 间:{b1}<br/>{a1}: {c1}",
                backgroundColor: "rgba(0,0,0,0.25)",
                axisPointer: {
                  type: ""
                }
              },
              grid: {
                left: "4%",
                right: "4%",
                bottom: "3%",
                top: "18%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  data: res.data.map(item => item.name),
                  axisTick: {
                    show: true
                  },
                  axisLine: {
                    show: false
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "#9ab3c4"
                    }
                  }
                }
              ],
              yAxis: [
                {
                  name: "单位：m³/h",
                  triggerEvent: true,
                  nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    fontSize: 14,
                    padding: [0, 0, 5, 50]
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: "#274057",
                      type: "dashed"
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: false
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "rgba(255,255,255,1)"
                    }
                  }
                }
              ],
              series: [
                {
                  type: "bar",
                  itemStyle: {
                    normal: {
                      color: "#03212c80"
                    },
                    emphasis: {
                      color: "#03212c80"
                    }
                  },
                  barGap: "-100%",
                  barWidth: "25%",
                  data: maxlist,
                  animation: false
                },
                {
                  name: "监测值",
                  type: "line",
                  symbol: "circle",
                  smooth: true,
                  symbolSize: 10,
                  lineStyle: {
                    normal: {
                      width: 2,
                      type: "dashed",
                      color: "#00f2ff",
                      shadowColor: "#00f2ff",
                      shadowBlur: 10,
                      shadowOffsetY: 5
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: "#00f2ff",
                      borderWidth: 4,
                      borderColor: "#175b65",
                      label: {
                        show: true,
                        position: "top",
                        textStyle: {
                          color: "#fff"
                        }
                      }
                    }
                  },
                  data: res.data.map(item => item.value)
                }
              ]
            };
            mychartair.clear();
            mychartair.setOption(option, true);
            mychartair.resize();
          } else {
            this.precipitationShow = true;
          }
        }
      });
    },
    //涌水量
    getWaterInflow() {
      this.$http.get("visualization/home/gushingData").then(res => {
        if (res.code == 200) {
          if (res.data.length != 0) {
            this.WaterInflowShow = false;
            var mychartair = echarts.init(
              document.getElementById("WaterInflow")
            );
            var option = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  lineStyle: {
                    color: "#57617B"
                  }
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                top: "20%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  axisLine: {
                    lineStyle: {
                      color: "#57617B"
                    }
                  },
                  data: res.data.map(item => item.name),
                  axisTick: {
                    show: true
                  },
                  axisLine: {
                    show: false
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "#9ab3c4"
                    }
                  }
                }
              ],
              yAxis: [
                {
                  name: "单位：m³/h",
                  triggerEvent: true,
                  nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    fontSize: 14,
                    padding: [0, 0, 5, 50]
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: "#3a4a50"
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "#3a4a50"
                    }
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "rgba(255,255,255,1)"
                    }
                  }
                }
              ],
              series: [
                {
                  name: "涌水量",
                  type: "line",
                  smooth: true,
                  symbol: "circle",
                  symbolSize: 5,
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "#00e1e1"
                          },
                          {
                            offset: 0.8,
                            color: "#041921"
                          }
                        ],
                        false
                      )
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: "#00e1e1",
                      borderColor: "rgba(137,189,2,0.27)",
                      borderWidth: 12
                    }
                  },
                  data: res.data.map(item => item.value)
                }
              ]
            };
            mychartair.clear();
            mychartair.setOption(option, true);
            mychartair.resize();
          } else {
            this.WaterInflowShow = true;
          }
        }
      });
    },
    //排水量
    getdrainage() {
      this.$http.get("visualization/home/drainageData").then(res => {
        if (res.code == 200) {
          this.accumulatenum = res.data.dayValue;
          if (res.data.tjData.length != 0) {
            this.drainageShow = false;
            var mychartair = echarts.init(document.getElementById("drainage"));
            var option = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                top: "20%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  axisLine: {
                    lineStyle: {
                      color: "#57617B"
                    }
                  },
                  data: res.data.tjData.map(item => item.name),
                  axisTick: {
                    show: true
                  },
                  axisLine: {
                    show: false
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "#9ab3c4"
                    }
                  }
                }
              ],
              yAxis: [
                {
                  name: "单位：m³/h",
                  triggerEvent: true,
                  nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    fontSize: 14,
                    padding: [0, 0, 5, 50]
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: "#3a4a50"
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "#3a4a50"
                    }
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "rgba(255,255,255,1)"
                    }
                  }
                }
              ],
              series: [
                {
                  type: "bar",
                  data: res.data.tjData.map(item => item.value),
                  barWidth: "28px",
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "#03ebeb"
                          },
                          {
                            offset: 1,
                            color: "#061d26"
                          }
                        ],
                        false
                      )
                    }
                  }
                }
              ]
            };
            mychartair.clear();
            mychartair.setOption(option, true);
            mychartair.resize();
          } else {
            this.drainageShow = true;
          }
        }
      });
    },
    //地表水
    getsurfaceWater() {
      this.$http.get("visualization/home/surfaceData").then(res => {
        if (res.code == 200) {
          if (res.data.length != 0) {
            this.surfaceWaterShow = false;
            var mychartair = echarts.init(
              document.getElementById("surfaceWater")
            );
            var option = {
              tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(0,0,0,0.25)",
                axisPointer: {
                  type: ""
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                top: "20%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  axisLine: {
                    lineStyle: {
                      color: "#57617B"
                    }
                  },
                  data: res.data.map(item => item.name),
                  axisTick: {
                    show: true
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "#9ab3c4"
                    }
                  }
                }
              ],
              yAxis: [
                {
                  name: "水位：单位/m",
                  triggerEvent: true,
                  nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    fontSize: 14,
                    padding: [0, 0, 5, 50]
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "#3a4a50"
                    }
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "rgba(255,255,255,1)"
                    }
                  }
                },
                {
                  name: "流量：单位m³/s",
                  triggerEvent: true,
                  nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    fontSize: 14,
                    padding: [0, 10, 5, 0]
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "#3a4a50"
                    }
                  },
                  axisLabel: {
                    show: true,
                    rotate: 0,
                    interval: 0,
                    textStyle: {
                      padding: [5, 0, 0, 0],
                      fontSize: 14,
                      color: "rgba(255,255,255,1)"
                    }
                  }
                }
              ],
              series: [
                {
                  name: "水位",
                  type: "line",
                  yAxisIndex: 1,
                  smooth: true,
                  symbol:
                    "image://",
                  symbolSize: 38,
                  lineStyle: {
                    color: "#00eae9"
                  },
                  itemStyle: {
                    normal: {
                      color: "#00eae9"
                    }
                  },
                  data: res.data.map(item => item.swValue)
                },
                {
                  name: "流量",
                  type: "bar",
                  barWidth: "18",
                  showBackground: true,
                  backgroundStyle: {
                    color: "#142b38",
                    barBorderRadius: [8, 8, 0, 0]
                  },
                  itemStyle: {
                    normal: {
                      barBorderRadius: [8, 8, 0, 0],
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                          offset: 1,
                          color: "#06a3d5"
                        },
                        {
                          offset: 0.7,
                          color: "#06a3d5"
                        },
                        {
                          offset: 0,
                          color: "#152c3980"
                        }
                      ])
                    }
                  },
                  data: res.data.map(item => item.llValue)
                }
              ]
            };
            mychartair.clear();
            mychartair.setOption(option, true);
            mychartair.resize();
          } else {
            this.surfaceWaterShow = true;
          }
        }
      });
    },
    //疏放水
    getdrainageData() {
      listPumpRealData(this.queryParams).then(response => {
        this.drainageData = response.rows;
      });
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "oddcolor";
      } else {
        return "evencolor";
      }
    },
    tableRowClassNameT({ rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "evencolort";
      } else {
        return "oddcolort";
      }
    },
    //长观孔
    getholeRealDataList() {
      listHoleRealData(this.queryParams).then(response => {
        this.holeRealDataList = response.rows;
      });
    },
    //地表岩移
    getsinkRealDataList() {
      listSinkRealData(this.queryParams).then(response => {
        this.sinkRealDataList = response.rows;
      });
    },
    //异常
    getpoliceList() {
      this.$http.get("/visualization/home/alarmCount").then(res => {
        if (res.code == 200) {
          var count = res.data.toString();
          var lengthnum = this.list.length - count.length;
          this.list = this.changeStr(this.list, lengthnum, count);
        }
      });
    },
    changeStr(str, index, changeStr) {
      return (
        str.substr(0, index) + changeStr + str.substr(index + changeStr.length)
      );
    },
    jsllist() {
      this.precipitationVisible = true;
    },
    ysllist() {
      this.WaterInflowVisible = true;
    },
    psllist() {
      this.drainageVisible = true;
    },
    dbslist() {
      this.surfaceWaterVisible = true;
    },
    wzlist() {
      this.microseismVisible = true;
    },
    quakeData() {
      this.$http.get("visualization/home/quakeData").then(res => {
        if (res.code == 200) {
          this.optionData = res.data;
        }
      });
    },
    // 初始化label样式
    setLabel() {
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index]
        };
        item.label = {
          normal: {
            show: false,
            color: color[index],
            position: "right",
            offset: [0, 3],
            formatter: [
              "{d|{d}%}",
              "————",
              //   '{c|{c}}{b|台}',
              "{b|{b}}"
            ].join("\n"), // 用\n来换行
            rich: {
              b: {
                // color: '#fff',
                lineHeight: 25,
                align: "left",
                color: color[index]
              },
              c: {
                fontSize: 22,
                // color: '#fff',
                textShadowColor: "#1c90a6",
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5,
                color: color[index]
              },
              d: {
                color: color[index],
                align: "left"
              }
            }
          }
        };
        item.labelLine = {
          normal: {
            show: false,
            length2: 30,
            lineStyle: {
              width: 1,
              color: color[index]
            }
          }
        };
      });
    },
    // 图表初始化
    initChart() {
      this.statusChart = echarts.init(this.$refs.chart);
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      this.option = getPie3D(this.optionData, 0.6, 180, 20, 20, 0.6);
      this.statusChart.setOption(this.option);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.option.series.push({
        name: "微震监测", //自己根据场景修改
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 13,
          lineHeight: 20
        },
        startAngle: -40, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "60%"],
        center: ["50%", "50%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0 //这里必须是0，不然2d的图会覆盖在表面
        }
      });
      this.statusChart.setOption(this.option);
      this.bindListen(this.statusChart);
    },
    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
    bindListen(myChart, optionName = "option") {
      let selectedIndex = "";
      let hoveredIndex = "";
      // 监听点击事件，实现选中效果（单选）
      // myChart.on("click", (params) => {
      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
      //   const isSelected =
      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
      //   const isHovered =
      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
      //   const startRatio =
      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
      //   const endRatio =
      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
      //     this[optionName].series[selectedIndex].parametricEquation =
      //       getParametricEquation(
      //         this[optionName].series[selectedIndex].pieData.startRatio,
      //         this[optionName].series[selectedIndex].pieData.endRatio,
      //         false,
      //         false,
      //         k,
      //         this[optionName].series[selectedIndex].pieData.value
      //       );
      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
      //   }
      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
      //   this[optionName].series[params.seriesIndex].parametricEquation =
      //     getParametricEquation(
      //       startRatio,
      //       endRatio,
      //       isSelected,
      //       isHovered,
      //       k,
      //       this[optionName].series[params.seriesIndex].pieData.value
      //     );
      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
      //     isSelected;
      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
      //   selectedIndex = isSelected ? params.seriesIndex : null;
      //   // 使用更新后的 option，渲染图表
      //   myChart.setOption(this[optionName]);
      // });
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on("mouseover", params => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
          if (hoveredIndex !== "") {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = this[optionName].series[hoveredIndex].pieStatus
              .selected;
            isHovered = false;
            startRatio = this[optionName].series[hoveredIndex].pieData
              .startRatio;
            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
            k = this[optionName].series[hoveredIndex].pieStatus.k;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            this[optionName].series[
              hoveredIndex
            ].parametricEquation = getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              this[optionName].series[hoveredIndex].pieData.value
            );
            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = "";
          }
          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "微震监测"
          ) {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected = this[optionName].series[params.seriesIndex].pieStatus
              .selected;
            isHovered = true;
            startRatio = this[optionName].series[params.seriesIndex].pieData
              .startRatio;
            endRatio = this[optionName].series[params.seriesIndex].pieData
              .endRatio;
            k = this[optionName].series[params.seriesIndex].pieStatus.k;
            // 对当前点击的扇形，执行高亮操作（对 option 更新）
            this[optionName].series[
              params.seriesIndex
            ].parametricEquation = getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              // this[optionName].series[params.seriesIndex].pieData.value + 60
              this[optionName].series[params.seriesIndex].pieData.value + 5
            );
            this[optionName].series[
              params.seriesIndex
            ].pieStatus.hovered = isHovered;
            // 记录上次高亮的扇形对应的系列号 seriesIndex
            hoveredIndex = params.seriesIndex;
          }
          // 使用更新后的 option，渲染图表
          myChart.setOption(this[optionName]);
        }
      });
      // 修正取消高亮失败的 bug
      myChart.on("globalout", () => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          k = this[optionName].series[hoveredIndex].pieStatus.k;
          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          this[optionName].series[
            hoveredIndex
          ].parametricEquation = getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            this[optionName].series[hoveredIndex].pieData.value
          );
          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }
        // 使用更新后的 option，渲染图表
        myChart.setOption(this[optionName]);
      });
    },
    // 自适应宽高
    changeSize() {
      this.statusChart.resize();
    },
    //异常数据
    unusual() {
      this.unusualShow = true;
    }
  },
  mounted() {
    //根据窗口变化自动调节图表大小
    const that = this;
    setTimeout(function() {
      that.initChart();
    }, 1000);
    window.onresize = function() {
      that.changeSize();
    };
  },
  created() {
    this.getprecipitation();
    this.getWaterInflow();
    this.getdrainage();
    this.getsurfaceWater();
    this.getdrainageData();
    this.getholeRealDataList();
    this.getsinkRealDataList();
    this.getpoliceList();
    this.quakeData();
    this.dataRefreh();
    var that = this;
    setTimeout(function() {
      that.setLabel();
    }, 1000);
  },
  destroyed() {
    // 清除计时器
    this.clear();
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog.innerdialog {
  width: 55% !important;
  height: 70% !important;
  background: #072226 !important;
  border: 1px solid #fff5;
  box-shadow: 0 0 20px #fff5;
  margin-left: 50% !important;
  transform: translate(-50%, 0%);
}
::v-deep .el-dialog {
  width: 102.8% !important;
  height: 103.9% !important;

  margin-left: -27px !important;
  background: url("../../../assets/img/dialogbg.png") no-repeat !important;
  background-size: 100% 100% !important;
  padding: 20px 40px 30px !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
  font-size: 22px;
  text-shadow: 0 0 15px rgb(30, 216, 213);
}
::v-deep .el-dialog__headerbtn:hover .el-dialog__close {
  width: 30px;
  height: 30px;
  color: #f15f0000 !important;
  background: url("../../../assets/img/backjt.png") no-repeat;
  background-size: 100% 100%;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  width: 30px;
  height: 30px;
  color: #f15f0000 !important;
  background: url("../../../assets/img/backjt.png") no-repeat;
  background-size: 100% 100%;
}
::v-deep .el-dialog__headerbtn {
  position: absolute;
  top: 30px;
  right: 40px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 24px;
}
::v-deep{
  .el-dialog{
    margin-top: -1.9vh !important
  }
}
.fuse {
    width: 100%;
    height: 100%;
    color: #ffffff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../../assets/images/back.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  position: absolute;
}
.accumulate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  background: url(../../../assets/img/displacement.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.accumulatetxt {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  letter-spacing: 1px;
  font-size: 14px;
}
.accumulatenum {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
}
::v-deep ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #064041;
}
::v-deep ::-webkit-scrollbar-thumb {
  background-color: #0e88a3;
  border-radius: 5px;
}
::v-deep .drainage .el-table thead {
  background-image: url("../../../assets/img/theader.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%;
}
.el-table {
  background: rgba(0, 0, 0, 0) !important;
  color: #d7d7d7;
}
::v-deep .evencolor {
  background: rgba(0, 0, 0, 0) !important;
}
::v-deep .oddcolor {
  background: #041b28 !important;
}

::v-deep .el-table th.is-leaf,
::v-deep .el-table td {
  border-bottom: none !important;
}
::v-deep .el-table tr {
  background: none;
}
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #041b28 !important;
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
  background: none;
}
::v-deep .el-table td.gutter,
::v-deep .el-table th.gutter {
  background: none !important;
}
::v-deep .el-table thead {
  color: #fff;
}
::v-deep .el-table th {
  background: rgba(0, 0, 0, 0);
  padding: 15px 0 !important;
  color: #fff;
}
::v-deep .tables .el-table thead {
  background: #0e526760 !important;
}
::v-deep .tables .el-table th {
  background: rgba(0, 0, 0, 0);
  padding: 15px 0 !important;
  color: #65c5e6 !important;
}
.content_middle {
  display: flex;
  flex-direction: column;
  .abnormal {
    width: 100%;
    height: 150px;
    position: relative;
    .abnormalnum {
      width: 369px;
      height: 52px;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 30px;
      line-height: 52px;
      background: url(../../../assets/img/abnormal.png) no-repeat;
      background-size: 100% 100%;
      color: #fff;
      letter-spacing: 2px;
    }
    .tote {
      position: absolute;
      top: 73%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      span {
        display: inline-block;
        width: 52px;
        height: 43px;
        background: url(../../../assets/img/jamb.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 43px;
        color: #fff;
        font-weight: 600;
        margin-right: 10px;
        font-size: 34px;
      }
    }
  }
  .hydrology {
    height: 45%;
    width: 100%;
    background: url(../../../assets/img/table.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 20px 1px 10px 1px;
    position: relative;
    .hydrologytxt {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #f4f5f2;
      font-size: 14px;
      letter-spacing: 2px;
    }
  }
  .surface {
    flex: 1;
    width: 100%;
    margin-top: 10px;
    background: url(../../../assets/img/table.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 20px 1px 10px 1px;
    position: relative;
    .hydrologytxt {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #f4f5f2;
      font-size: 14px;
      letter-spacing: 2px;
    }
  }
}
::v-deep .el-dialog.innerdialog {
  width: 55% !important;
  height: 70% !important;
  background: #072226 !important;
  border: 1px solid #fff5;
  box-shadow: 0 0 20px #fff5;
  margin-left: 50% !important;
  transform: translate(-50%, 0%);
}
::v-deep .el-dialog {
  width: 102.8% !important;
  height: 103.9% !important;

  margin-left: -27px !important;
  background: url("../../../assets/img/dialogbg.png") no-repeat !important;
  background-size: 100% 100% !important;
  padding: 20px 40px 30px !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
  font-size: 22px;
  text-shadow: 0 0 15px rgb(30, 216, 213);
}
::v-deep .el-dialog__headerbtn:hover .el-dialog__close {
  width: 30px;
  height: 30px;
  color: #f15f0000 !important;
  background: url("../../../assets/img/backjt.png") no-repeat;
  background-size: 100% 100%;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  width: 30px;
  height: 30px;
  color: #f15f0000 !important;
  background: url("../../../assets/img/backjt.png") no-repeat;
  background-size: 100% 100%;
}
::v-deep .el-dialog__headerbtn {
  position: absolute;
  top: 30px;
  right: 40px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 24px;
}
::v-deep.header-title {
  div {
    padding: 5px 20px;
    i {
      font-size: 24px;
      color: #fff;
      margin: 0 20px;
    }
    span {
      display: inline-block;
      width: 30%;
      height: 1px;
      background: #077a6b;
      box-shadow: 0 0 5px rgb(30, 216, 213);
      vertical-align: super;
    }
  }
}
::v-deep .el-dialog__wrapper {
  overflow: hidden;
}
.chart {
  width: 100%;
  height: 100%;
}
.bg {
  width: 60%;
  height: 83px;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../../../assets/img/echartsbg.png) no-repeat;
  background-size: cover;
}
</style>
